<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
</head>

<body>
    <div id="box">
        <!-- <ul>
            请输入：<input type="text">
            <button v-on:click="add()">添加</button>

            <li v-for="(item, index) in arr" :key="item.id"
                v-bind:style="index % 2 === 0 ? { backgroundColor: 'red' } : { backgroundColor: 'green' }">
                {{ item.name }} 
                <button v-on:click="del(item.id)">删除</button>
            </li>
        </ul> -->


        <!-- 自定义 -->
        请输入：<input type="text" v-model="cc">
        <button v-on:click="add()">添加</button>
        <ul>

            <li v-for="(item,index) in arr" :key="item.id" v-zdy="index">{{item.name}}<button
                    v-on:click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>


    <div id="box2">
        <input type="number" v-model="num1" placeholder="输入第一个数字">
        <select v-model="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" v-model="num2" placeholder="输入第二个数字">
        <button @click="(jisuan)">计算</button>
        <p>结果: {{  }}</p>
    </div>








    <!-- 引入 Vue -->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <!-- <script>
        new Vue({
            el: '#box',
            data: {
                arr: [
                    { id: 1, name: '张三' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '王五' },
                ],
            },
            methods: {
                del(id) {
                    var a = this.arr.findIndex(item => item.id === id);
                    this.arr.splice(a, 1);
                },

            }
        });
    </script> -->



    <!-- 自定义属性 -->
    <script>
        Vue.directive('zdy', function (ele, binding) {
            console.log(binding);
            if (binding.value % 2 == 0) {
                ele.style.background = 'red'
            } else {
                ele.style.background = 'green'
            }
        })

        new Vue({
            el: '#box',
            data: {
                cc: '',
                arr: [
                    { id: 1, name: '张三' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '王五' },
                ],
            },
            methods: {

                del(id) {
                    var a = this.arr.findIndex(item => item.id === id);
                    this.arr.splice(a, 1);
                },
                add() {
                    this.arr.push({
                        id: this.arr.length + 1,
                        name: this.cc,
                    });
                    this.cc = ''
                }
            }
        });
    </script>


    <!-- 计算器 -->
    
</body>

</html>